<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .preview_wrap{
            width: 350px;
            height: 450px;
            background-color: aqua;
           margin-left: 100px;
           margin-top: 100px;
           position: relative;
           
        }
        .preview_wrap .prev_img{
            width: 350px;
            height: 350px; 
            border:1px solid #333;
            box-sizing: border-box;
            position: relative;
        }
        .preview_wrap .prev_img>img{
             width: 100%;
             height: 100%;
        }
        .preview_wrap .prev_img .mask{
            width:240px;
            height: 240px;
            background-color: #faea0d;
            opacity: 0.5;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .preview_wrap  .big{
             width:540px ;
             height: 540px;
             border: 1px solid #222;
             overflow: hidden;
             position: absolute;
             left:352px ;
             top: 0;
             display: none;
             
        }
        /* 新加的  图片不定位 top left 不能用，图片动不了*/
        .preview_wrap  .big img{
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script>
        window.onload=function(){
            //1.查
         var preview_wrap=document.querySelector('.preview_wrap');
         var mask=document.querySelector('.mask');
         var big=document.querySelector('.big');
         var bigpic=document.querySelector('.big>img');
         var prev_img=document.querySelector('.prev_img');

         //2.鼠标经过大盒子 ，让 mask big 显出  离开之隐藏
         prev_img.onmouseenter=function(){
             mask.style.display="block"
             big.style.display="block"
         }
         prev_img.onmouseleave=function(){
             mask.style.display="none"
             big.style.display="none"
         }

         //3.mask 在盒子 prev_img内移动
         prev_img.onmousemove=function(e){

            // mask 之所以可以移动
            var maskx=e.pageX-preview_wrap.offsetLeft-mask.offsetWidth/2;
            var masky=e.pageY-preview_wrap.offsetTop-mask.offsetWidth/2

            //mask 最大移动距离   
            var maskMaxx=prev_img.offsetWidth-mask.offsetWidth
            var maskMaxy=prev_img.offsetHeight-mask.offsetHeight
            if(maskx>=maskMaxx){
                maskx=maskMaxx

            }else if(maskx<=0){
              maskx=0;
            }

            if(masky>=maskMaxy){
                masky=maskMaxy

            }else if(masky<=0){
              masky=0;
            }

            mask.style.left=maskx+'px';
            mask.style.top=masky+'px';


            //4.大图如何跟着移动
            // 大图的最大移动距离

             var picMaxx=bigpic.offsetWidth-big.offsetWidth;
             var picMaxy=bigpic.offsetHeight-big.offsetHeight;

            //  和mask的移动有比例关系
             /*     maskx                picx?
            -------------------=-----------------
                maskMaxx              picMaxx

             */
            //  大图的移动距离
            bigpic.style.left=-maskx*picMaxx/maskMaxx+'px';
            bigpic.style.top=-masky*picMaxy/maskMaxy+'px'

         }

        }
        
         
        // 结构和样式 及鼠标经过的交互修改一下，更符合京东的原版


    </script>
</head>
<body>
    <div class="preview_wrap">
        <div class="prev_img">
           <img src="imgs/001.jpg" alt="">
           <div class="mask"></div>    
        </div> 
        <div class="big">
            <img src="imgs/001.jpg" alt="">
          </div>
      
    </div>
</body>
</html>